<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入  初始化样式 字体图标 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/iconfont.css">

    <!-- 引入jq -->
    <script src="./static/js/jquery/jquery.js"></script>


    <!-- mui css 与js -->
    <link rel="stylesheet" href="./static/js/mui/css/mui.css">




    <script src="./static/js/mui/js/mui.min.js"></script>


    <!-- 引入rem js  -->
    <script src="./static/js/rem/rem.js"></script>




    <style>



    </style>
</head>

<body>




    <header class="mui-bar mui-bar-nav" id="header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">商品详情页面</h1>
    </header>



    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item" href="#tabbar">
            <!-- mui-icon -->
            <span class="  mui-icon  iconfont  icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item  mui-active" href="#tabbar-with-chat">
            <span class="mui-icon   iconfont  icon-shop "></span>
            <span class="mui-tab-label">商城</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-contact">
            <span class="mui-icon    iconfont icon-trophy "></span>
            <span class="mui-tab-label">生活服务</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-map">
            <span class="mui-icon   iconfont  icon-team"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>



    <div class="mui-content">
        <!-- 内容区域 -->
        <div class="mui-slider  " id='mybannerBox' style="overflow: hidden;">
            <div class="mui-slider-group  my_group">
               
                
                <div class="mui-slider-item"><a href="#"><img src="https://s1.ax1x.com/2020/10/21/BCGtKO.jpg" /></a></div>
                <div class="mui-slider-item"><a href="#"><img src="https://s1.ax1x.com/2020/10/21/BCJSRx.jpg" /></a></div>
                <div class="mui-slider-item"><a href="#"><img src="https://s1.ax1x.com/2020/10/21/BC3Hf0.jpg" /></a></div>
                <div class="mui-slider-item"><a href="#"><img src="https://s1.ax1x.com/2020/10/21/BCGoR0.jpg" /></a></div>
              
              
              
                
              
                

            </div>
        </div>

        <!-- {
            "did": "5",
            "name": "【橄榄油版酸奶蛋糕】",
            "price": "32.00",
            "img_sm": "p9138.jpg",
            "img_lg": "p9138-l.jpg",
            "detail": "酸奶蛋糕，这是第二次做。自前一次做了带去单位分享后，吃到的同事都说好吃，连不爱甜食的自己也觉得细腻可口。特别是入冰箱后取出品味风味尤佳。喜欢那一丝丝的凉意一丝丝的甜味，入口的感觉特别绵软，很适合夏季食用的。这次还是没有用黄油，因为等融化嫌麻烦，继续用了橄榄油。不同的是这次用了水浴法烘焙的。我用的模具是八寸的活底蛋糕模具，成品有一点收腰，但口味还挺成功的。只是早上拍照心急得很，因为LG上班比较早。难得他如此喜欢吃了最大的两块。",
            "material": "鸡蛋、玉米淀粉、绵白糖、白醋、低筋粉、橄榄油、酸奶。"
        } -->


        <ul class="mui-table-view  productULBox">


        </ul>
    </div>


    <script src="./static/js/template/template-web.js"></script>

    <script type="html/text" id='productTmp'>


        {{each   subjects   item }}
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img13.360buyimg.com/mobilecms/s316x316_jfs/t1/143888/6/639/340041/5ee5fae0Ef44fa1c7/fbe3c0f29b42dd86.jpg!q70.dpg.webp">
                    <div class="mui-media-body">
                        <div class="clear-fix">
                            <span class="float-left">{{item.name}}</span>
                            <span class="float-right">{{item.price}}</span>
                        </div>
                        
                        <p class='mui-ellipsis'>{{item.detail}}</p>

                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img13.360buyimg.com/mobilecms/s316x316_jfs/t1/143888/6/639/340041/5ee5fae0Ef44fa1c7/fbe3c0f29b42dd86.jpg!q70.dpg.webp">
                    <div class="mui-media-body">
                        <div class="clear-fix">
                            <span class="float-left">{{item.name}}</span>
                            <span class="float-right">{{item.price}}</span>
                        </div>
                        
                        <p class='mui-ellipsis'>{{item.detail}}</p>

                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img13.360buyimg.com/mobilecms/s316x316_jfs/t1/143888/6/639/340041/5ee5fae0Ef44fa1c7/fbe3c0f29b42dd86.jpg!q70.dpg.webp">
                    <div class="mui-media-body">
                        <div class="clear-fix">
                            <span class="float-left">{{item.name}}</span>
                            <span class="float-right">{{item.price}}</span>
                        </div>
                        
                        <p class='mui-ellipsis'>{{item.detail}}</p>

                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="http://img13.360buyimg.com/mobilecms/s316x316_jfs/t1/143888/6/639/340041/5ee5fae0Ef44fa1c7/fbe3c0f29b42dd86.jpg!q70.dpg.webp">
                    <div class="mui-media-body">
                        <div class="clear-fix">
                            <span class="float-left">{{item.name}}</span>
                            <span class="float-right">{{item.price}}</span>
                        </div>
                        
                        <p class='mui-ellipsis'>{{item.detail}}</p>

                    </div>
                </a>
            </li>
            {{/each}}

       
    </script>

    <script>

        $(function () {
            var getSeach = window.location.search.substr(1)  //"keyword=11111"

            var arr = getSeach.split('=')
            var obj = {}
            obj[arr[0]] = decodeURI(arr[1])
            console.log(obj)



            $.ajax({
                url: 'http://mengtion.vip/kfl-api/api/getItem.php',
                type: 'post',
                dataType: 'json',
                data: obj,
                success: function (res) {
                    console.log(res)
                    if (res.code == '1003') {
                        console.log(res.msg)
                    } else {
                        var productHTML = template('productTmp', res)

                        console.log(productHTML)

                        $('.productULBox').html(productHTML)


                    }

                }


            })



        })
    </script>



</body>

</html>